<template>
  <div>
    <div class="lg:gap-10 flex flex-col gap-5 mx-auto max-w-7xl">
      <div class="max-lg:px-4 flex justify-between items-center py-4">
        <el-breadcrumb separator-class="el-icon-arrow-right" class="flex items-center">
          <el-breadcrumb-item class="flex items-center" :to="{ path: localePath('/') }">
            <div class="flex items-center">
              <i class="el-icon-s-home mr-1 text-lg"></i>
            </div>
          </el-breadcrumb-item>
          <el-breadcrumb-item class="flex items-center whitespace-nowrap" :to="{ path: localePath('/cards') }">
            {{ $t('pages.pointcardlist') }}
          </el-breadcrumb-item>
          <el-breadcrumb-item class="">
            <p class="capitalize">
              {{ names?.name }}
            </p>
          </el-breadcrumb-item>
        </el-breadcrumb>
        <div class="lg:hidden">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5 cursor-pointer" @click="showDialog = true">
            <path
              fill-rule="evenodd"
              d="M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
      </div>
      <div class="lg:px-0 grid grid-cols-4 gap-12 px-4">
        <div class="lg:flex hidden flex-col col-span-1 gap-4">
          <!-- 游戏平台 -->
          <!-- 游戏平台 -->
          <!-- 游戏平台 -->
          <LazyClassifyCard :showActive="false" :classify="classify" :activeId="tabId" />
        </div>
        <div class="lg:col-span-3 flex flex-col col-span-4 gap-4">
          <!-- 全部游戏 -->
          <!-- 全部游戏 -->
          <!-- 全部游戏 -->
          <h2 class="font-medium text-[1.25rem] text-[#121212]">
            {{ names?.name }}
          </h2>
          <div class="lg:grid-cols-5 md:grid-cols-4 sm:grid-cols-3 grid grid-cols-2 gap-4 lg:gap-x-[4.65rem]">
            <nuxt-link v-for="item in goodsList" :key="item.id" :to="cardRecharge(item)" class="group flex flex-col gap-1 cursor-pointer">
              <div class="rounded-[0.75rem] w-full bgg p-1">
                <div class="rounded-[0.75rem] size-full overflow-hidden border relative aspect-[8/11]">
                  <img
                    :src="$globalFn.imgPrefixUrl(item.image || item.pic_image, 'goods_thumb_3_4')"
                    :title="item.goods_name || 'Card product details'"
                    :alt="item.goods_name || 'Game card image'"
                    loading="lazy"
                    class="size-full group-hover:scale-110 object-cover bg-gray-200 duration-300"
                  />
                  <img src="~/assets/img/bg-white.png" class="absolute top-2 inset-1/3 z-10 w-1/3 h-auto" alt="" />
                </div>
              </div>
              <span class="font-medium text-[0.75rem] text-[#121212] line-clamp-2">
                {{ item?.goods_name || item?.name }}
              </span>
              <p class="font-normal text-[0.75rem] text-[#666666]">
                {{ item?.region?.name || '' }}
              </p>
              <!-- <p class="font-normal text-[0.75rem] text-[#666666]">
                {{ $t("formItem.sale")
                }}{{
                  item.sales_actual >= 10000
                    ? (item.sales_actual / 10000).toFixed(2) + "w"
                    : item.sales_actual
                }}
              </p> -->
            </nuxt-link>
          </div>
          <Paging :total="total" :page.sync="page" :limit.sync="size" @change="handlePageChange" :current-query="$route.query"></Paging>
          <no-data v-if="goodsList.length == 0" :loading="loading"></no-data>
        </div>
      </div>
    </div>
    <LazyH5Dialog :showDialog="showDialog" :title="$t('pages.classification')">
      <LazyClassifyCard :showActive="false" :classify="classify" />
    </LazyH5Dialog>
  </div>
</template>
<script>
  let classify = {}
  export default {
    layout: 'newsHome',
    name: 'cardPlatform',
    key(route) {
      return route.fullPath
    },
    head() {
      return {
        title: this.categoryRes.seo_title,
        classify: {},
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: this.categoryRes.seo_description
          }
        ]
      }
    },
    data() {
      return {
        tabId: '', // 当前选中的分类ID
        tabCode: '', // 当前选中的分类代码
        page: 1, // 当前页码
        size: 20, // 每页显示数量
        loading: true, // 加载状态
        goodsList: [], // 商品列表数据
        showDialog: false, // 移动端分类弹窗显示状态
        names: {}, // 当前分类信息对象
        total: 0 // 商品总数
      }
    },
    async asyncData({ app: { $axios }, params: { code } }) {
      const [categoryRes, data] = await Promise.all([
        $axios.get('/api/goods_category/read', {
          params: { code }
        }),
        $axios.get('/api/goods_category/index?type=1')
      ])
      let obj = data._child.find(item => item.code === code)
      return {
        classify: data,
        tabCode: code,
        names: obj,
        tabId: obj.id,
        categoryRes: categoryRes
      }
    },
    mounted() {
      if (process.server) return
      this.page = this.$route.query.page || 1
      this.getGoodsList(this.names)
    },
    methods: {
      // 处理分页组件页码变化事件
      async handlePageChange({ page, currentQuery }) {
        this.page = currentQuery || page
        const newQuery = { ...this.$route.query, page: page }
        const newPath = this.$route.path + '?' + new URLSearchParams(newQuery).toString()
        window.history.replaceState({}, '', newPath)
        await this.getGoodsList(this.names)
      },
      // 根据分类对象的haschild属性决定调用哪个获取商品列表的方法
      async getGoodsList(obj) {
        return obj.haschild ? this.getGoodsListTrue() : this.getGoodsListFalse()
      },
      // 获取有子分类的商品列表数据
      async getGoodsListTrue() {
        const params = {
          page: this.$route.query.page || this.page,
          limit: this.size,
          cate_code: this.tabCode,
          paginate: 1
        }
        const res = await this.$axios.get(`/api/goods_category/goods?${new URLSearchParams(params).toString()}`)
        this.loading = false
        this.goodsList = res.data
        this.total = res.total
      },
      // 获取无子分类的商品列表数据
      async getGoodsListFalse() {
        const params = {
          page: this.$route.query.page || this.page,
          limit: this.size,
          cate_code: this.tabCode,
          type: 1,
          paginate: 1
        }
        const res = await this.$axios.get(`/api/goods/index?${new URLSearchParams(params).toString()}`)
        this.loading = false
        this.goodsList = res.data
        this.total = res.total
      },
      // 切换分类时导航到对应的分类页面
      // async changeTab(item) {
      //   this.$router.push({
      //     path: this.localePath(`/cards/${item.code}`),
      //   });
      // },
      // 根据商品类型生成对应的路由链接
      cardRecharge(item) {
        const path = this.names?.haschild ? `/cards/${item.code}` : `/product/${item.code}`
        return this.localePath(path)
      }
    }
  }
</script>
<style lang="less" scoped>
  .bgg {
    background: linear-gradient(180deg, #fff 50%, #e6e6e6 100%);
    border-radius: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
